<script>
import OperatingCateNode from "./OperatingCateNode.vue";
import OperatingRoomNode from "./OperatingRoomNode.vue";
import OperatingPatientNode from "./OperatingPatientNode.vue";
import OperatingDockerNode from "./OperatingDockerNode.vue";
import OperatingEmptyNode from "./OperatingEmptyNode.vue";
import OperatingGroupNode from "./OperatingGroupNode.vue";
import NodeWrapper from "./NodeWrapper.vue";
import { ElsCollapse, ElsCollapseItem } from "../collapse";
export default {
  name: "WrapCollapse",
  props: {
    type: {
      type: String,
      required: true,
    },
    config: {
      type: Object,
      // required: true,
      default: ()=>{
        return {
          idKey: 'id',
          pidKey: 'pid',
        }
      }
    }
    list: {
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {
      activeNames: [],
      scrollOffset: null,
    };
  },
  methods: {
    getComponentName(type) {
      switch (type) {
        case "opcategory":
          return "operating-cate-node";
        case "room":
          return "operating-room-node";
        case "docker":
          return "operating-docker-node";
        default:
          return "operating-empty-node";
      }
    },
    scrollHandler(_event, value) {
      this.scrollOffset = value;
      // this.$nextTick(() => {
      //   this.scheduleManager.drawEdge();
      // });
    },
  },

  components: {
    OperatingCateNode,
    OperatingRoomNode,
    OperatingPatientNode,
    OperatingDockerNode,
    OperatingGroupNode,
    OperatingEmptyNode,
    NodeWrapper,
    ElsCollapse,
    ElsCollapseItem,
  },
};
</script>
<template>
  <div class="collapse-wrap">
    <els-collapse :accordion="true" v-model="activeNames">
      <node-wrapper :type="type" @scroll="scrollHandler">
        <template v-slot="{ clickedId, handlerNodeClick }">
          <component
            v-for="item in list"
            class="card-node"
            :is="getComponentName(type)"
            :id="item[config.idKey || 'id']"
            :pid="item[config?.pidKey || 'pid']"
            :isFirst="index === 0"
            :isLast="false"
            :level="index"
            :key="item[config.idKey || 'id']"
            :data="item"
            :actived="clickedId === it.id"
            @clickedHandler="handlerNodeClick"
          />
        </template>
      </node-wrapper>
    </els-collapse>
  </div>
</template>
<style></style>
